<template>
    <div class="common-tab-content">
        <div class="table-box">
            <div class="table-btn">
                <el-button type="primary" @click="uploadData">
                    <template #icon><Upload/></template>
                    导入
                </el-button>
                <el-button type="primary" @click="downloadTpl">
                    <template #icon><Download/></template>
                    下载模板
                </el-button>
            </div>
            <div class="table-list">
                <el-table :key="tbKey" ref="commonTable" :data="tableData" border stripe style="width: 100%" height="620px">
                    <el-table-column type="index" label="序号" width="80"/>
                    <el-table-column prop="school" label="院校名称"/>
                    <el-table-column prop="year" label="年份"/>
                    <el-table-column prop="sort" label="位次"/>
                    <el-table-column prop="jqn" label="较去年">
                        <template #default="scope">
                            <span style="color: #12ae5c" v-if="scope.row.jqn > 0">+{{scope.row.jqn}}<el-icon><Top/></el-icon></span>
                            <span style="color: #ec3636" v-else>{{scope.row.jqn}}<el-icon><Bottom/></el-icon></span>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
        <el-dialog v-model="visible" width="500">
            <template #header>
                <div class="common-title">
                    <h4 class="title-class">
                        <el-icon class="el-icon--left">
                            <Upload/>
                        </el-icon>
                        <span>导入</span>
                    </h4>
                </div>
            </template>
            <div class="common-dialog-wrap">
                <el-upload
                        class="upload-demo"
                        drag
                        action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
                        multiple
                >
                    <el-icon class="el-icon--upload"><upload-filled /></el-icon>
                    <div class="el-upload__text">
                        将文件拖至此处 <em>或点击上传</em>
                    </div>
                    <template #tip>
                        <div class="el-upload__tip">
                            仅限于.xlsx格式，且单个文件不得大于500M
                        </div>
                    </template>
                </el-upload>
            </div>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="visible = false">取消</el-button>
                    <el-button type="primary" @click="enterAdd">确定</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>
<script setup lang="ts">
import {reactive, ref} from "vue"
import {Upload, Download, Top, Bottom, UploadFilled} from "@element-plus/icons-vue"
import {$msg} from "@/utils";
const tableData = ref([
        {
            school: '上海交通大学',
            year: '2021',
            sort: '14334',
            jqn: 43
        },
        {
            school: '上海交通大学',
            year: '2021',
            sort: '14334',
            jqn: 43
        },
        {
            school: '上海交通大学',
            year: '2021',
            sort: '14334',
            jqn: 43
        },
        {
            school: '上海交通大学',
            year: '2021',
            sort: '14334',
            jqn: -1243
        }
])
const visible = ref(false)
function enterAdd(){
    $msg({type: 'success', message: '导入成功'})
    visible.value = false
}
function uploadData(){
    visible.value = true
}
function downloadTpl(){
    $msg({type: 'success', message: '下载成功'})
}
</script>
<style scoped lang="less">
.table-box{
    .table-btn{
        padding: 20px;
    }
    .table-list{
        padding: 0 20px;
        .common-table-btn{
            font-size: 14px;
            font-weight: normal;
            line-height: 24px;
            cursor: pointer;
            color: #368FFF;
            margin: 0 3px;
        }
    }
    .paging-box{
        padding: 12px 20px;
        text-align: center;
        display: flex;
        justify-content: center;
    }
}
</style>